<template>
	<el-container>
		<el-aside width="200px" v-loading="showGrouploading">
			<el-container>
				<el-header>
					<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
				</el-header>
				<el-main class="nopadding">
					<el-tree ref="group" class="menu" node-key="id" :data="group" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree>
				</el-main>
			</el-container>
		</el-aside>
		<el-container>
		<el-header>
			<div class="left-panel">
				<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe>
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column label="角色名称" prop="roleName" width="200"></el-table-column>
				<el-table-column label="角色编码" prop="roleCode" width="200"></el-table-column>
				<el-table-column label="描述" prop="description" width="200"></el-table-column>
				<el-table-column label="是否启用" prop="enable" width="80">
					<template #default="scope">
						<el-switch v-model="scope.row.enable" @change="changeSwitch($event, scope.row)" :loading="scope.row.$switch_status" :active-value="0" :inactive-value="1"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" fixed="right" align="right">
					<template #default="scope">
						<el-button-group>
							<el-button text type="primary" size="small" @click="table_edit_power(scope.row, scope.$index)">权限设置</el-button>
							<el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
							<el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
						</el-button-group>
					</template>
				</el-table-column>

			</scTable>
		</el-main>
	</el-container>
	</el-container>
	<el-drawer v-model="dialog.permission" title="权限设置" custom-class="drawerBG" direction="rtl" destroy-on-close>
		<permissionDialog v-if="dialog.permission" ref="permissionDialog" @success="handleSaveSuccess" @closed="dialog.permission=false"></permissionDialog>
	</el-drawer>
	<el-drawer v-model="dialog.save" :size="500" title="编辑" custom-class="drawerBG" direction="rtl" destroy-on-close>
		<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
	</el-drawer>
	<el-drawer v-model="dialog.add" :size="500" title="新增" custom-class="drawerBG" direction="rtl" destroy-on-close>
		<add @guanbi="guanbi" ref="addDialog"></add>
	</el-drawer>

</template>

<script>
	import saveDialog from './update'
	import permissionDialog from '../../basic/role/permission'
	import add from './add'
	export default {
		name: 'role',
		components: {
			saveDialog,
			permissionDialog,
			add
		},
		data() {
			return {
				groupFilterText: '',
				datas:{},
				group: [],
				showGrouploading: false,
				index:false,
				dialog: {
					save: false,
					permission: false
				},
				apiObj: this.$API.user.role.list,
				selection: [],
				search: {},
                params: {},
				node: {}
            }
		},
		watch: {
			groupFilterText(val) {
				this.$refs.group.filter(val);
			}
		},
		mounted() {
			this.getGroup()
		},
		methods: {
			guanbi(){
				this.dialog.add=false

				this.$refs.table.clearSelection();
				this.$refs.table.getData();

			},
			//加载树数据
			async getGroup(){
				this.showGrouploading = true;
				var res = await this.$API.user.dept.list.post();
				// console.log(res)
				this.showGrouploading = false;
				// var allNode ={id: '', label: '所有'}
				// res.data.unshift(allNode);
				this.group = res.data;
			},
			//树过滤
			groupFilterNode(value, data){
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			//树点击事件
			groupClick(data){
                let orgIds = [];
                orgIds.push(data.id);
                var node = this.$refs.group.getNode(data);
                this.node = node
                this.getTree(node.data , orgIds)
                this.params.orgIds = orgIds;
                this.params.realName = this.search.realName;
                this.params.staffPhone = this.search.staffPhone;
                this.$refs.table.reload(this.params)
			},
            getTree(node , orgIds) {
                if(node.children === null ||  node.children.length == 0){
                    orgIds.push(node.id);
                }else{
                    orgIds.push(node.id);
                    node.children.forEach(item => {
                        this.getTree(item, orgIds)
                    })
                }
            },
            //添加
            add() {
                if (!this.node.data) {
                    this.$message.warning('未选择部门')
                    return false
                }
                this.dialog.add = true
                this.$nextTick(() => {
                    this.$refs.addDialog.open('add').setData(this.node.data)
                })
            },
            //编辑
            table_edit(row) {
                // this.datas=row
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open('edit').setData(row)
                })
            },
			//查看
			table_show(row){
				this.dialog.save = true
				this.$nextTick(() => {
					this.$refs.saveDialog.open('show').setData(row)
				})
			},
			//权限设置
            table_edit_power(row){
				this.dialog.permission = true
				console.log(row)
				this.$nextTick(() => {
					this.$refs.permissionDialog.open(row)
				})
			},
			//删除
			async table_del(row,index){
				var reqData = {id: row.id}
				var res = await this.$API.user.roleDeleteById.post(reqData);
				if(res.code == 200){
					 // this.$refs.table.refresh()
					this.$refs.table.tableData.splice(index, 1);
					this.$message.success(res.data)
				}else{
					this.$alert(res.message, "提示", {type: 'error'})
				}
			},
			//批量删除
			async batch_del(){
				this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？如果删除项中含有子集将会被一并删除`, '提示', {
					type: 'warning'
				}).then(() => {
					// const loading = this.$loading();
					// this.$refs.table.refresh()
					// loading.close();
					// console.log(0)
					// this.$message.success("操作成功")
					const loading = this.$loading();
					this.selection.forEach(item => {
						this.$refs.table.tableData.forEach((itemI, indexI) => {
							if (item.id === itemI.id) {
								this.$refs.table.tableData.splice(indexI, 1)
							}
						})
					})

					this.batch_delte()
					loading.close();
				}).catch(() => {

				})
			},

			//批量删除接口
			async batch_delte(){
				const arr = []
				this.selection.forEach(item=>{
					var reqData = {id: item.id}
					arr.push(reqData)
				})
				// var reqData = {id: row.id}
				var res = await this.$API.user.roleDelBatch.post(arr);
				if(res.code == 200){
					//这里选择刷新整个表格 OR 插入/编辑现有表格数据
					this.$message.success(res.data)
				}else{
					this.$alert(res.message, "提示", {type: 'error'})
				}

			},
			//表格选择后回调事件
			selectionChange(selection){
				this.selection = selection;
			},
			//表格内开关
			changeSwitch(val, row){
				row.enable = row.enable == 1?0:1
				row.$switch_status = true;
				setTimeout(()=>{
					delete row.$switch_status;
					row.enable = val;
					// console.log(typeof val, row)
					this.$message.success("操作成功")
				}, 500)
			},
			//搜索
			upsearch(){

			},
			//根据ID获取树结构
			filterTree(id){
				var target = null;
				function filter(tree){
					tree.forEach(item => {
						if(item.id == id){
							target = item
						}
						if(item.children){
							filter(item.children)
						}
					})
				}
				filter(this.$refs.table.tableData)
				return target
			},
			//本地更新数据
			handleSaveSuccess(data, mode){
				this.dialog.save=false
				this.dialog.permission=false
				if(mode=='add'){
					this.$refs.table.refresh()
				}else if(mode=='edit'){
					this.$refs.table.refresh()
				}
			}
		}
	}
</script>

<style>
</style>
